<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>在线客服系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/wolive.ico"/>
    {/* 载入框架&插件CSS */}
    {load href="__libs__/layer/skin/layer.css"/}
    {load href="__libs__/amaze/css/amazeui.min.css"/}

    {/* 载入框架&插件JS */}
    {load href="__libs__/jquery/jquery.min.js"/}
    {load href="__libs__/jquery/jquery.form.min.js"/}
    {load href="__libs__/jquery/jquery.cookie.js"/}
    {load href="__libs__/layer/layer.js"/}
    {load href="__libs__/amaze/js/amazeui.min.js"/}
    {load href="__libs__/layui/layui.js"/}
    {load href="__libs__/layui/css/layui.css"/}
    {load href="__libs__/bootstrap/bootstrap.min.css"/}
    {/* 载入项目 CSS & JS */}
    {load href="__style__/admin/common.css"/}
    {load href="__style__/admin/reload.css"/}
    {load href="__script__/admin/functions.js"/}
    <link rel="stylesheet" type="text/css" href="__style__/admin/index.css?v=1.7">
    <link rel="stylesheet" type="text/css" href="__style__/admin/index_me.css?v=1.7">
    <script src="__script__/admin/common_me.js?v=1.06"></script>
    {load href="__libs__/push/pusher.min.js"/}
    <script src="__libs__/adapter.js"></script>
    <script src="__script__/main.js?v=3.16"></script>


    <script type="application/javascript">
        var mediaStreamTrack;
        var WEB_SOCKET_SWF_LOCATION = "/assets/libs/web_socket/WebSocketMain.swf";
        var WEB_SOCKET_DEBUG = true;
        var WEB_SOCKET_SUPPRESS_CROSS_DOMAIN_SWF_ERROR = true;

        var chat_data = Array();
        var record;
        var myTitle = document.title;
        var config = {
            'app_key': '{$app_key}',
            'whost': '{$whost}',
            'value': {$value},
            'wport': {$wport}
        }

        var titleBlink = function (add) {
            if (!titleBlink.title) {
                titleBlink.record = 1;
                titleBlink.title = document.title;
                $(document).on('click', function () {
                    titleBlink(false);
                });
            }
            if (typeof add !== 'undefined' && !add) {
                if (titleBlink.timer) {
                    window.clearInterval(titleBlink.timer);
                    delete titleBlink.timer;
                }
                document.title = titleBlink.title;
                return;
            }

            if (!titleBlink.timer && (typeof document.hidden == 'undefined' || document.hidden)) {
                titleBlink.timer = window.setInterval(function () {
                    document.title = (++titleBlink.record % 2 == 1) ? '【消息】' + titleBlink.title : '【 】' + titleBlink.title;
                }, 800);
            }
        };


        layui.use('element', function () {
            var element = layui.element;
        });

        var wolive_connect =function () {
            pusher = new Pusher('{$app_key}', {
                encrypted: {$value}
                , enabledTransports: ['ws']
                , wsHost: '{$whost}'
                , {$port}: {$wport}
                , authEndpoint: '/admin/login/auth'
                ,disableStats: true
            });

            var web = "{$arr['business_id']}";
            var dataarr = new Array();
            var value = "{$arr['service_id']}";

            // 私人频道
            var channelme = pusher.subscribe("ud" + value);
            channelme.bind("on_notice", function (data) {
                if (data.message.type == 'change') {
                    layer.msg(data.message.msg);
                }
                getchat();
                getwait();
            });

            channelme.bind("on_chat", function (data) {
                $.cookie("cu_com", '');
                layer.msg('该访客被删除');
                getchat();
            });


            // 公共平道

            var channelall = pusher.subscribe("all" + web);
            channelall.bind("on_notice", function (data) {

                if ({$arr['groupid']} == 0 || {$arr['groupid']} == data.message.groupid) {
                    layer.msg(data.message.msg, {offset: "20px"});
                }

                if ({$arr['groupid']} != data.message.groupid) {

                    layer.msg('该用户向其他分组咨询！', {offset: "20px"});
                }

                getwait();
                getchat();

            });

            var channel = pusher.subscribe("kefu" + value);
            // 接受视频请求
            channel.bind("video", function (data) {
                getchat();
                var msg = data.message;
                var cha = data.channel;
                var cid = data.cid;
                var avatar = data.avatar;
                var username = data.username;
                layer.open({
                    type: 1,
                    title: '申请框',
                    area: ['260px', '160px'],
                    shade: 0.01,
                    fixed: true,
                    btn: ['接受', '拒绝'],
                    content: "<div style='position: absolute;left:20px;top:15px;'><img src='" + avatar + "' width='40px' height='40px' style='border-radius:40px;position:absolute;left:5px;top:5px;'><span style='width:100px;position:absolute;left:70px;top:5px;font-size:13px;overflow-x: hidden;'>" + username + "</span><div style='width:90px;height:20px;position:absolute;left:70px;top:26px;'>" + msg + "</div></div>",
                    yes: function () {
                        layer.closeAll('page');
                        var str = '';
                        str += '<div class="videos">';
                        str += '<video id="localVideo" autoplay></video>';
                        str += '<video id="remoteVideo" autoplay class="hidden"></video></div>';


                        layer.open({
                            type: 1
                            , title: '视频'
                            , shade: 0
                            , closeBtn: 1
                            , area: ['440px', '378px']
                            , content: str
                            , end: function () {


                                mediaStreamTrack.getTracks().forEach(function (track) {
                                    track.stop();
                                });

                            }
                        });
                        try {
                            connenctVide(cid);
                        } catch (e) {
                            console.log(e);
                            return;
                        }

                    },
                    btn2: function () {
                        var sid = $('#channel').text();
                        $.ajax({
                            url: '/admin/set/refuse',
                            type: 'post',
                            data: {channel: cha}
                        });

                        layer.closeAll('page');
                    }
                });
            });

            channel.bind('getswitch', function (data) {
                layer.alert(data.message);
                getchat();
            });

            // 接受拒绝视频请求
            channel.bind("video-refuse", function (data) {
                layer.alert(data.message);
                layer.closeAll('page');
            });

            // 接受消息

            channel.bind("cu-event", function (data) {

                if ("{$voice}" == 'open') {
                    audioElementHovertree = document.createElement('audio');
                    audioElementHovertree.setAttribute('src', "{$voice_address}");
                    audioElementHovertree.setAttribute('autoplay', 'autoplay');
                }

                var debug, portrait, showtime;
                var cdata = $.cookie("cu_com");

                if (cdata) {
                    var json = $.parseJSON(cdata);
                    debug = json.visiter_id;
                    portrait = json.avatar;
                } else {
                    debug = "";
                }

                if ($.cookie("time") == "") {
                    time = data.message.timestamp;
                    $.cookie("time", time);
                    var mydate = new Date(time * 1000);
                    showtime = mydate.getHours() + ":" + mydate.getMinutes();
                } else {
                    time = $.cookie("time");
                    if ((data.message.timestamp - time) > 60) {
                        var mydate = new Date(data.message.timestamp * 1000);
                        showtime = mydate.getHours() + ":" + mydate.getMinutes();
                    } else {
                        showtime = "";
                    }
                    $.cookie("time", data.message.timestamp);
                }
                var msg = '';
                msg += '<li class="chatmsg"><div class="showtime">' + showtime + '</div><div style="position: absolute;left:3px;">';
                msg += '<img class="my-circle  se_pic" src="' + portrait + '" width="50px" height="50px"></div>';
                var picture_class = is_picture(data.message.content) ? ' no_border' : '';
                msg += "<div class='outer-left"+picture_class+"'><div class='customer'>";
                msg += "<pre>" + data.message.content + "</pre>";
                msg += "</div></div>";
                msg += "</li>";

                if (!$("#v" + data.message.channel).length) {
                    getchat();
                } else {
                    $('#chat_list').prepend($("#v" + data.message.channel));
                }

                if (data.message.visiter_id == debug) {
                    $(".conversation").append(msg);
                    getwatch(data.message.visiter_id);
                } else {
                    var count = parseInt($("#c" + data.message.channel).text()) || 0;
                    $("#c" + data.message.channel).removeClass('hide').html(count+1);
                }
                getnow(data.message);
                var str = data.message.content;
                str = str.replace(/<div><a .*? download.*?>.*?<\/a><\/div>/, '[文件]');
                str = str.replace(/<div.*?<audio src=.*?><\/audio>.*?<\/div>/, '[语音]');
                str = str.replace(/<img src=.*?emoji\/emo_.*?>/gi, '[表情]');
                str = str.replace(/<img .*?src=['"]([^'"]+)[^>]*>/gi, '[图片]');
                str = str.replace(/^<a[^<>]+>.+?<\/a>$/, '[超链接]');

                $("#msg" + data.message.channel).html(strip_html(str) || '新消息...');
                var div = document.getElementById("wrap");
                if (div) {
                    div.scrollTop = div.scrollHeight;
                }
                $("#notices-icon").removeClass('hide');
                titleBlink();
            });

            var offline = function (data) {

                //表示访客离线
                var cdata = $.cookie("cu_com");
                var chas;
                if (cdata) {
                    var jsondata = $.parseJSON(cdata);
                    chas = jsondata.channel;
                }

                if (chas == data.message.chas) {
                    //头像变灰
                    $("#v_state").text("离线");
                }

                $("#img" + data.message.chas).addClass("icon_gray");
                getchat();

            };

            // 通知游客离线
            channelall.bind("logout", offline);
            channel.bind("logout", offline);

            var online = function (data) {

                //表示访客在线
                var cdata = $.cookie("cu_com");
                var chas;
                if (cdata) {
                    var jsondata = $.parseJSON(cdata);
                    chas = jsondata.channel;
                }
                if (chas == data.message.chas) {
                    //头像变亮
                    $("#img" + data.message.chas).removeClass("icon_gray");
                    $("#v_state").text("在线");
                }

                $("#img" + data.message.chas).removeClass("icon_gray");
                getchat();

            };

            // 通知游客上线
            channelall.bind("geton", online);
            channel.bind("geton", online);

            pusher.connection.bind('state_change', function (states) {

                if (states.current == 'unavailable' || states.current == "disconnected" || states.current == "failed") {

                    pusher.unsubscribe("kefu" + value);
                    pusher.unsubscribe("all" + web);
                    pusher.unsubscribe("ud" + value);

                    if (typeof pusher.isdisconnect == 'undefined') {
                        pusher.isdisconnect = true;

                        pusher.disconnect();
                        delete pusher;

                        window.setTimeout(function () {
                            wolive_connect();
                        }, 1000);
                    }


                    $(".profile").text('离线');
                }
            });

            pusher.connection.bind('connected', function () {
                if (getchat.notFirstConnect) {
                    getchat();
                }
                getchat.notFirstConnect = true;
                $(".profile").text('在线');
            });
        }


        function showpage(obj) {

            var value = $(obj).attr("name");
            var key = $(obj).attr("id");
            layer.tips(value, '#' + key, {tips: [4, '#2F4050']});
        }

        var strip_html = function (html) {
            return html;
        }

    </script>

    <script type="text/javascript" src="/assets/libs/web_socket/swfobject.js"></script>
    <script type="text/javascript" src="/assets/libs/web_socket/web_socket.js"></script>
    <script type="text/javascript" src="__script__/admin/online.js?v=3.16"></script>
    
</head>
<style type="text/css">

    #group-menus-main li{
        display: block;
        width: 100%;
        height: 45px;
        line-height: 20px;
    }

    a:hover {
        text-decoration: none;
        color: #858684;
    }

    a {
        color: #858684;
    }

    .info{
        position: absolute;
        left:40%;
    }

    #notices-icon{
        display: inline-block;
        width: 15px;
        height: 15px;
        background: url("/assets/images/admin/notice.png") no-repeat;
        background-size:100%;
        position: absolute;
        left:30px;
        top: 8px;
        z-index: 9990;
    }


   #group-menus-main i{
    font-size: 20px;
   }


</style>
<body>



<div id="layout-west"  >
    <div id="layout-menus">
        <div id="layout-menus-info">
            <a class="" href="javascript:;">
                <img src="/assets/images/index/workerman_logo.png" alt="..." class="am-circle" width="35px" height="35px">
                <!-- <span style="color: #fff;font-weight: bold;font-size: 16px;margin-left: 10px;">Wolive客服</span> -->
                <span class="info hide" style="color: #fff;font-weight: bold;font-size: 16px;margin-top:10px;">客服系統</span>
            </a>

        </div>

        <div id="layout-menus-lists">

            <ul id="group-menus-main" class="group-menus am-list ">
                {if $part == "首页" }
                <li class="menu-item" id="title1" onmouseover="showpage(this)" name="首页" style="background: #13292B;">
                    <a  href="{:url('admin/index/index')}" >
                        <i class="layui-icon">&#xe68e;</i><span class="info hide">首页</span>
                    </a>
                </li>
                {else}
                <li class="menu-item" id="title1" onmouseover="showpage(this)" name="首页" >
                    <a  href="{:url('admin/index/index')}" >
                        <i class="layui-icon">&#xe68e;</i><span class="info hide">首页</span>
                    </a>
                </li>

                {/if}

                {if $part == "对话平台" }
                <li class="menu-item" id="title2" onmouseover="showpage(this)" name="对话平台" style="background:#13292B;">
                    <a  href="{:url('admin/index/chats')}" >
                        <i class="layui-icon">&#xe63a;</i><span class="info hide">对话平台</span>
                    </a>
                </li>
                {else}
                <li class="menu-item" id="title2" onmouseover="showpage(this)" name="对话平台" >
                    <i id="notices-icon" class="hide"></i>
                    <a  href="{:url('admin/index/chats')}" >
                        <i class="layui-icon">&#xe63a;</i><span class="info hide">对话平台</span>
                    </a>
                </li>
                {/if}

                <!--
                {if $part == "留言查看"}
                 <li class="menu-item" id="title4" onmouseover="showpage(this)" name="留言查看" style="background:#13292B;">
                    <a href="{:url('admin/index/message')}" >
                       <i class="am-icon-envelope am-icon-sm" style="font-size: 12px;margin-left: 1px;"></i><span class="info hide">留言查看</span>
                    </a>
                </li>

                {else}

                <li class="menu-item" id="title4" onmouseover="showpage(this)" name="留言查看">
                    <a href="{:url('admin/index/message')}" >
                       <i class="am-icon-envelope am-icon-sm" style="font-size: 12px;margin-left: 1px;"></i><span class="info hide">留言查看</span>
                    </a>
                </li>
                {/if}
                -->

                {if $arr['level'] != 'service'}

                {if $part == "历史记录"}
                    <li class="menu-item"  id="title7" onmouseover="showpage(this)" name="历史记录" style="background: #13292B;">
                        <a href="{:url('admin/manager/view')}">
                            <i class="layui-icon">&#xe60e;</i><span class="info hide">历史记录</span>
                        </a>
                    </li>
                    {else}
                    <li class="menu-item"  id="title7" onmouseover="showpage(this)" name="历史记录">
                        <a href="{:url('admin/manager/view')}">
                            <i class="layui-icon">&#xe60e;</i><span class="info hide">历史记录</span>
                        </a>
                    </li>
                {/if}

                {/if}

               {if $part == "网页部署"}
                <li class="menu-item" id="title9" onmouseover="showpage(this)" name="网页部署" style="background: #13292B;">
                    <a href="{:url('admin/index/front')}" >
                        <i class="layui-icon">&#xe7ae;</i><span class="info hide">网页部署</span>
                    </a>
                </li>

                {else}
                <li class="menu-item" id="title9" onmouseover="showpage(this)" name="网页部署">
                    <a href="{:url('admin/index/front')}" >
                        <i class="layui-icon">&#xe7ae;</i><span class="info hide">网页部署</span>
                    </a>
                </li>
                {/if}

                {if $part == '设置'}
                 <li class="menu-item" id="title10" onmouseover="showpage(this)" name="设置" style="background: #13292B;">
                    <a href="{:url('admin/index/set')}" >
                        <i class="layui-icon">&#xe716;</i><span class="info hide">设置</span>
                    </a>
                 </li>
                {else}
                <li class="menu-item" id="title10" onmouseover="showpage(this)" name="设置">
                  <a href="{:url('admin/index/set')}" >
                    <i class="layui-icon">&#xe716;</i><span class="info hide">设置</span>
                  </a>
                 </li>
                {/if}

            </ul>
        </div>
    </div>

    <div class="west_foot1" style="width:100%;height:40px;position: absolute;bottom: 0px;background: #13292B;text-align: center;line-height: 40px;">
        <a href="javascript:changeall()" >
            <i class="menus-icon am-icon-align-justify am-icon-sm"></i>
        </a>
    </div>
    <div class="west_foot2 hide" style="width:100%;height:40px;position: absolute;bottom: 0px;background: #13292B;text-align: center;line-height: 40px;">
        <a href="javascript:changesmall()" >
            <i class="menus-icon am-icon-align-justify am-icon-sm"></i>
        </a>
    </div>
</div>

<script type="text/javascript">
    var width =document.body.clientWidth;

    var changeall =function(){
        $("#layout-west").css("width","130px");
        $("#layout-center").css({"position":"absolute","left":"130px","width":(width-130)+"px"});
        $(".info").removeClass("hide");
        $(".west_foot2").removeClass("hide");
        $(".west_foot1").addClass("hide");
    }
    var changesmall =function(){
        $("#layout-west").css("width","55px");
        $("#layout-center").css({"position":"absolute","left":"55px","width":(width-55)+"px"});
        $(".info").addClass("hide");
        $(".west_foot2").addClass("hide");
        $(".west_foot1").removeClass("hide");
    }

    window.onresize = function(){
        $("#layout-west").css("width","55px");
        $("#layout-center").css("width",(width-55)+"px");
    }

</script>

<div id="layout-center">
    <div id="layout-north">
        {if $part == '设置' && $title != '设置'}
        <a id="layout-logo" href="{:url('admin/index/set')}"><i class="am-icon-reply"></i>&nbsp;{$title}</a>
        {else}
        <a id="layout-logo"><i class="am-icon-bookmark"></i>&nbsp;{$title}</a>&nbsp;{$expire}
        {/if}
        <ul id="layout-tools" class="am-nav am-nav-pills">
            <li style="width: 100%;height: 25px">
                <div class="am-dropdown " data-am-dropdown>
                    <a class="am-dropdown-toggle" href="javascript:;" data-am-dropdown-toggle>
                        <img  id="se_avatar" src="{$arr['avatar']}" alt="..." class="am-circle" width="40px" height="40px">
                        <span class="handle" id="se"> {$arr['nick_name']} </span>
                        <span id="channel" style="display: none;"></span>
                        <span id="customer" style="display: none;"></span>
                        {if $arr['state'] == 'online'}
                        <span class="profile">在线<i class="am-icon-caret-down"></i></span>
                        {else}
                         <span class="profile">离线<i class="am-icon-caret-down"></i></span>
                        {/if}
                    </a>

                    <ul class="am-dropdown-content">
                        <li><a href='javascript:showinfo({$data},{$group})'><i class="am-icon-user"></i> 个人资料</a></li>
                        <li><a href='javascript:modify({$arr["service_id"]})' ><i class="am-icon-key"></i>修改密码</a></li>
                        {if $arr['level'] == 'super_manager'}
                        <li><a href="{:url('manager/index/index')}"><i class="am-icon-cog"></i>超级管理</a></li>
                        {/if}
                        <li class="am-divider"></li>
                        <li>
                            <a href="{:url('admin/login/logout')}" class="safe-exit">
                                <i class="am-icon-power-off"></i> 安全退出
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
